<!--预约结果-->
<template>
    <div>
        <!-- 面包屑导航 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>预约结果</el-breadcrumb-item>
            </el-breadcrumb>
             <div style="margin: 10px auto;"></div>
            <!-- 搜索筛选 -->
            <el-alert
                title="默认查询当前日期"
                type="success"
                >
            </el-alert>
           <div style="margin: 10px auto;">当前系统时间：<span>{{nowTime}}</span></div>
            <el-form :inline="true" :model="search" class="user-search">
            <el-form-item label="搜索：">
                <el-date-picker
                    size="small"
                    v-model="search.newdate"
                    :value-format="type"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
             
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="findData()">搜索</el-button>
            </el-form-item>
            </el-form>

            <el-table size="small"  style="width: 100%" :data="listData" highlight-current-row v-loading="loading"  element-loading-text="拼命加载中" >
            
            <el-table-column
                width="200"
              prop="nowdate"
              label="日期">
               <template slot-scope="scope">
                      <span>{{scope.row.nowdate}}</span>
              </template>
            </el-table-column>


            <el-table-column
                
                width="200"
              prop="startTime"
              label="开始时间">
               <template slot-scope="scope">
                      <span style="color:red;font-size:24px">{{scope.row.startTime}}</span>
              </template>
            </el-table-column>

            <el-table-column
                
                width="200"
              prop="endTime"
              label="结束时间">
            </el-table-column>


            <el-table-column
                
                width="200"
              prop="state"
              label="预约状态">
               <template slot-scope="scope">
                   <el-tag :type=" scope.row.state == '1' ? 'success':'danger'" effect=" dark">
                        {{ scope.row.stateName }}
                   </el-tag>
                
              </template>
            </el-table-column>

            
            

        <el-table-column  align="center" label="操作" min-width="300">
            <template slot-scope="scope">
                
                <el-button v-if="scope.row.state == '1'"  @click="seeStudent(scope.row.id)"  size="mini"   type="danger" icon="el-icon-view" >查看学员</el-button>
               
                <el-tooltip class="item" effect="dark" content="学员练习结束后操作" placement="top">
                <el-button v-if="scope.row.state == '1' && scope.row.signs == '0' "  @click="endPractice(scope.row.id)"  size="mini"   type="primary" icon="el-icon-success" >练车结束</el-button>
                </el-tooltip>
         </template>
      </el-table-column>
    </el-table>

    <!-- 编辑界面 -->
    <el-dialog title="学员信息" :visible.sync="FormVisible" width="30%" >
      <el-form label-width="120px" :model="Form" >
        <el-form-item>
            <el-avatar :size="50" :src="Form.url"></el-avatar>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="姓名:" >
                    <div>{{Form.username}}</div>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="电话:">
               <div>{{Form.tel}}</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
      </div>
    </el-dialog>


    </div>
</template>
<script>
export default {
    data() {
        return {
            search:{
                newdate:'',
            },
            type:"yyyy-MM-dd",
            listData:[],
            loading:false,
            FormVisible:false,
            Form:"",
            nowTime:''
        }
    },
    created(){
            this.findData();
            this.getTime();
    },
    methods: {
         findData(){  //查询发布计划的结果
            if(this.search.newdate == null ){
                this.search.newdate = ''
            }
                this.loading =true;
                setTimeout(()=>{
                this.loading =false
                },500)
                this.$api.get("/subject/token/findSubjectSatate",{"newdate":this.search.newdate},res=>{
                        this.listData = res.data.data;
                })
         },
         seeStudent(id){
             this.$api.get("/order/token/seeStudent",{"subid":id},res=>{
                     this.Form = res.data.data;
                     this.FormVisible =true
             });
         },
         endPractice(id){ //练车结束
                this.MyLoading();
                this.$api.get("/order/token/endPractice",{"id":id},res=>{
                      if(res.data.code ==200){
                          this.findData();
                          this.$message.success("成功！")
                      }
                })
         },
         getTime(){
				setInterval(()=>{
					//new Date() new一个data对象，当前日期和时间
					//toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果。
					this.nowTime = new Date().toLocaleString();
				},1000)
		},
        MyLoading(){
            this.loading =true;
            setTimeout(()=>{
                this.loading =false
            },500)
        }
    },
}
</script>
<style scoped>

</style>